Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="layout">
	<div class="content">
		<h1><strong>C</strong>ascading <strong>S</strong>olar <strong>S</strong>ystem</h1>
		<p>I was <a href="https://xkcd.com/356/">nerd sniped</a> by a <a href="https://www.reddit.com/r/css/comments/1dimy4t/how_can_i_attach_the_labels_to_the_orbitsthey/">question on Reddit</a>. Read more on <a href="https://noahliebman.net/2024/06/cascading-solar-system/">my blog</a>.</p>
	</div>

<ol class="solar-system">
		<li class="orbit">
        	<div class="label">Sun</div>
			<div class="planet sun"></div>
		</li>
		<li class="orbit">
			<div class="label">Mercury</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet mercury"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Venus</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet venus"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Earth</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet earth"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Mars</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet mars"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Jupiter</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet jupiter"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Saturn</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet saturn"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Uranus</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet uranus"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Neptune</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet neptune"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Pluto</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet pluto"></div>
			</div>
		</li>
	</ol>
</div>

</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
* {
	box-sizing: border-box;
	margin: 0;
}

.solar-system {
	--sun-diameter: 12dvh;
	--sun-spacing: .15;

/* very much not to scale */
	--mercury-size: .2;
	--venus-size: .25;
	--earth-size: .25;
	--mars-size: .25;
	--jupiter-size: .75;
	--saturn-size: .6;
	--uranus-size: .4;
	--neptune-size: .4;
	--pluto-size: .1;

/* to scale! https://en.wikipedia.org/wiki/Orbital_period#Examples_of_sidereal_and_synodic_periods */
	--mercury-period: .24;
	--venus-period: .615;
	--earth-duration: 5s;
	--mars-period: 1.88;
	--jupiter-period: 11.86;
	--saturn-period: 29.46;
	--uranus-period: 84;
	--neptune-period: 164;
	--pluto-period: 248;

padding: 1rem 0 0 0;
	overflow: hidden;

display: grid;
	gap: calc(var(--sun-diameter) * .15);
	grid-template-rows: repeat(10, auto);
	grid-template-areas:
		"pluto"
		"neptune"
		"uranus"
		"saturn"
		"jupiter"
		"mars"
		"earth"
		"venus"
		"mercury"
		"sun";

.orbit {
		--sun-margin: calc(var(--sun-diameter) * var(--sun-spacing));
		--planet-diameter: max(var(--planet-size) * var(--sun-diameter), 1rem);

grid-column: 1 / -1;
		display: grid;
		grid-template-rows: subgrid;
		grid-template-columns: subgrid;
		justify-items: center;

&:has(.sun) {
			--planet-size: 1;
			grid-area: sun;
			padding-block: var(--sun-margin);
            .label {
                color: transparent;
            }
		}
		&:has(.mercury) {
			--planet-size: var(--mercury-size);
			--planet-duration: calc(var(--earth-duration) * var(--mercury-period));
			grid-row: mercury-start / sun-end;
			.planet, .label {
				grid-area: mercury;
			}
		}
		&:has(.venus) {
			--planet-size: var(--venus-size);
			--planet-duration: calc(var(--earth-duration) * var(--venus-period));
			grid-row: venus-start / sun-end;
			.planet, .label {
				grid-area: venus;
			}
		}
		&:has(.earth) {
			--planet-size: var(--earth-size);
			--planet-duration: var(--earth-duration);
			grid-row: earth-start / sun-end;
			.planet, .label {
				grid-area: earth;
			}
		}
		&:has(.mars) {
			--planet-size: var(--mars-size);
			--planet-duration: calc(var(--earth-duration) * var(--mars-period));
			grid-row: mars-start / sun-end;
			.planet, .label {
				grid-area: mars;
			}
		}
		&:has(.jupiter) {
			--planet-size: var(--jupiter-size);
			--planet-duration: calc(var(--earth-duration) * var(--jupiter-period));
			grid-row: jupiter-start / sun-end;
			.planet, .label {
				grid-area: jupiter;
			}
		}
		&:has(.saturn) {
			--planet-size: var(--saturn-size);
			--planet-duration: calc(var(--earth-duration) * var(--saturn-period));
			grid-row: saturn-start / sun-end;
			.planet, .label {
				grid-area: saturn;
			}

}
		&:has(.uranus) {
			--planet-size: var(--uranus-size);
			--planet-duration: calc(var(--earth-duration) * var(--uranus-period));
			grid-row: uranus-start / sun-end;
			.planet, .label {
				grid-area: uranus;
			}
		}
		&:has(.neptune) {
			--planet-size: var(--neptune-size);
			--planet-duration: calc(var(--earth-duration) * var(--neptune-period));
			grid-row: neptune-start / sun-end;
			.planet, .label {
				grid-area: neptune;
			}
		}
		&:has(.pluto) {
			--planet-size: var(--pluto-size);
			--planet-duration: calc(var(--earth-duration) * var(--pluto-period));
			grid-row: pluto-start / sun-end;
			.planet, .label {
				grid-area: pluto;
			}
		}
	}

.planet {
		height: var(--planet-diameter);
		aspect-ratio: 1;
		border-radius: 50%;
		/* background-color: rgb(255 0 0 / .9); */
		z-index: 1;
		background-image: radial-gradient(circle at center 80%, rgb(255 255 255 / .4), rgb(255 255 255 / 0) 50%);

&.sun {
			--sun-color: #ffd800;
			background-color: var(--sun-color);
			background-image: none;
			box-shadow: 0 0 42px 0 color-mix(in oklch, transparent, var(--sun-color) 50%);
		}
		&.mercury {
			background-color: #989494;
		}
		&.venus {
			background-color: #e1d59d;
		}
		&.earth {
			background-color: #008bb3;
		}
		&.mars {
			background-color: #dfa272;
		}
		&.jupiter {
			background-color: #af7045;
		}
		&.saturn {
			background-color: #d3b57c;
		}
		&.uranus {
			background-color: #77aac4;
		}
		&.neptune {
			background-color: #3a80a4;
		}
		&.pluto {
			background-color: #989494;
		}
	}

.orbit-ring {
		grid-area: 1 / 1 / -1 / -1;
		height: calc(2 * (100% - var(--planet-diameter) / 2 - var(--sun-diameter) / 2 - var(--sun-margin)));
		aspect-ratio: 1;
		translate: 0 calc(var(--planet-diameter) / 2);
		border-radius: 50%;
		border: 1px solid rgb(255 255 255 / .5);
		z-index: 0;
	}

.axis {
		grid-area: 1 / 1 / -1 / -1;
		display: grid;
		grid-template-rows: subgrid;
		transform-origin: center calc(100% - var(--sun-diameter) / 2 - var(--sun-margin));
		animation: orbit var(--planet-duration) linear infinite;
	}

.label {
		align-self: center;
		translate: 0 -.5lh;
		z-index: 2;
	}
}

@keyframes orbit {
	from {
		rotate: 0turn;
	}

to {
		rotate: 1turn;
	}
}

body {
	font-family: system-ui, sans-serif;
	color: white;
	background: linear-gradient(to bottom, #112, #223);
}

a {
	color: currentcolor;
}

h1 {
	font-weight: 400;
}

.layout {
	min-height: 100dvh;
	display: grid;

& > .solar-system {
		align-self: end;
	}
}

.content {
	max-inline-size: 40rem;
	margin: 8px;
	& > * + * {
		margin-block-start: 1em;
	}
}

Frontend Forever App